<template>
  <view>
    <!-- search-bar组件 -->
    <search-bar placeholder="搜一搜"></search-bar>
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular>
      <swiper-item v-for="item in swipers" :key="item.goods_id">
        <image :src="item.image_src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 导航菜单 -->
    <view class="nav-list">
      <image v-for="item in catitems" :key="item.name" class="nav-img" :src="item.image_src" mode="scaleToFill"
        @click="navclick(item.name)" />
    </view>
    <!-- 楼层渲染 -->
    <view v-for="item in floorData" :key="item.floor_title.name">
      <!-- 标题 -->
      <image class="floor-title" :src="item.floor_title.image_src" mode="scaleToFill" />
      <!-- 图片区域 -->
      <view class="floor-img-box">
        <!-- 左边的图片 -->
        <navigator :url="item.product_list[0].navigator_url">
          <image :src="item.product_list[0].image_src" :style="{ width: item.product_list[0].image_width + 'rpx' }"
            mode="widthFix" />
        </navigator>
        <!-- 右边的图片 -->
        <view class="right-img-box">
          <navigator :url="subitem.navigator_url" v-for="(subitem, index) in item.product_list" :key="subitem.name"
          >
          <image :src="subitem.image_src" :style="{ width: subitem.image_width + 'rpx' }" v-show="index > 0"
            mode="widthFix" />
        </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        swipers: [],
        catitems: [],
        floorData: [],
      };
    },
    onLoad() {
      this.getSwipersData(), this.getCatitemsData(), this.getFloorData();
    },
    methods: {
      async getSwipersData() {
        const res = await uni.$request({
          url: "home/swiperdata",
        });
        if (res.meta.status === 200) {
          this.swipers = res.message;
        }
      },
      async getCatitemsData() {
        const res = await uni.$request({
          url: "home/catitems",
        });
        if (res.meta.status === 200) {
          this.catitems = res.message;
        }
      },
      async getFloorData() {
        const res = await uni.$request({
          url: "home/floordata",
        });
        if (res.meta.status === 200) {
          res.message.forEach(item => {
            item.product_list.forEach(subitem => {
              subitem.navigator_url = '/subpkg/goods-list/index?' + subitem.navigator_url.split('?')[1]
            })
          })
          this.floorData = res.message;
        }
      },
      navclick(name) {
        if (name === "分类") {
          uni.switchTab({
            url: "/pages/category/index",
          });
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  swiper {
    height: 400rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;

    .nav-img {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor-title {
    height: 60rpx;
    width: 100%;
    display: flex;
  }

  .right-img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .floor-img-box {
    display: flex;
    padding-left: 10rpx;
  }
</style>